<template>
  <el-container>
    <el-header><span>宠物领养信息管理系统</span>
      <div class="username"><span>{{ name }}</span>, 欢迎您</div>
      <el-button type="danger" size="small" @click="confirmExit" class="exitlogin">退出登录</el-button>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu
          default-active="/home/homePage"
          class="el-menu-vertical-demo"
          background-color="#FFFFE0"
          router
          :default-openeds="['1', '2', '3', '4']"
        >
          <el-menu-item index="/home/homePage">
            <span slot="title">首页</span>
          </el-menu-item>

          <el-submenu index="2" id="userManage">
            <template slot="title">
              <i class="el-icon-user"></i>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/home/manager">
              <span slot="title">管理员信息</span>
            </el-menu-item>
            <el-menu-item index="/home/user">
              <span slot="title">用户信息</span>
            </el-menu-item>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-document"></i>
              <span>宠物管理</span>
            </template>
            <el-menu-item index="/home/animal">
              <span slot="title">宠物信息</span>
            </el-menu-item>
            <el-menu-item index="/home/adopt">
              <span slot="title">领养记录</span>
            </el-menu-item>
          </el-submenu>

          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-message"></i>
              <span>信息管理</span>
            </template>
            <el-menu-item index="/home/room">
              <span slot="title">房间信息</span>
            </el-menu-item>
            <el-menu-item index="/home/jiyang">
              <span slot="title">寄养信息</span>
            </el-menu-item>
            <el-menu-item index="/home/liulang">
              <span slot="title">流浪宠物信息</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: 'Home',
  methods: {
    confirmExit () {
      this.$confirm('您确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.exit();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退出'
        });          
      });
    },
    exit () { 
      this.$store.commit('SET_NAME', null);
      this.$router.push('/');
    }
  },
  computed: {
    name() {
      return this.$store.state.name;
    },
  }
}
</script>
<style scoped>
  /* 通用样式 */
.el-header, .el-footer {
  background-color: #e5e1c6;
  color: #a7a6a1;
  text-align: center;
  line-height: 60px;
  font-size: 20px;
  font-weight: bolder;
  font-family:Arial, Helvetica, sans-serif;
}

.el-header::after {
  content: '';
  display: block;
  clear: both;
}

.el-container {
  background-color: #FFFACD;
  height: 100vh; /* 设置容器高度为视口高度 */
}

.el-aside {
  background-color: #FFFFE0;
  color: #7e7d76;
  text-align: center;
}

.el-main {
  background-color: #f8f6e4;
}

.username {
  float: left;
}

.username span {
  font-weight: 500;
}

.exitlogin {
  float: right;
  margin-top: 15px;
}

body > .el-container {
  margin-bottom: 40px;
}

/* 用户管理子菜单背景色 */
#userManage {
  background-color: #e9e5cb;
}

/* 移除激活状态下的文字颜色 */
.el-menu-item.is-active,
.el-submenu__title.is-active {
  background-color: rgb(237, 235, 209) !important; /* 使用!important确保优先级 */
  color: initial; 
}

</style>